import {
  Image,
  Pressable,
  StyleSheet,
  View,
  Modal,
  TouchableOpacity,
  TouchableHighlight,
  Alert,
  Animated,
  TouchableWithoutFeedback,
} from "react-native";
import /*RFValue*/ "react-native-responsive-fontsize";
import { ITask } from "../../../../types/task";
// import { TaskDetailsModal } from "../TaskControlsDropdown/TaskControlsDropdown";
import * as S from "./styles";
import { Text } from "react-native";
import moment from "moment";
import React, { useCallback, useState } from "react";
import { useTasks } from "../../../../hooks/useTasks";
import { showToast } from "../../../../utils/toast";

interface TaskItemProps extends ITask {
  hasOperated?: boolean;
  hasActived?: boolean;
  onActive?: any;
  onLongPress?: any;
}

const RecordBody = ({ card, getImageUrl, hasActived, onActive, onOperte }) => {
  // const levelViewRef = useRef(null);

  // console.log("---render body---", card.id);

  const [isPressed, setIsPressed] = useState(false);

  const handleLongPress = () => {
    setIsPressed(true);
  };

  const handlePressOut = () => {
    setTimeout(() => {
      setIsPressed(false);
    }, 1500);
  };

  let {
    eventOneName,
    eventTwoName,
    eventThreeName,
    remark,
    mood,
    time,
    addTimeStr,
    id,
    date,
  } = card;
  const image = getImageUrl(mood);
  eventTwoName = eventTwoName && "- " + eventTwoName;
  eventThreeName = eventThreeName && "- " + eventThreeName;
  return (
    <TouchableHighlight
      underlayColor=""
      onLongPress={() => {
        handleLongPress();
        onOperte(card);
      }}
      onPressOut={handlePressOut}
      onPress={() => onActive(date)}
    >
      <View
        style={[
          {
            // height: /*RFValue*/(60),
            // justifyContent: "center",
            // alignItems: "center",
            paddingVertical: /*RFValue*/ 6,
            paddingHorizontal: /*RFValue*/ 10,
          },
          isPressed && { backgroundColor: "rgb(190,203,225)" },
        ]}
      >
        <View style={styles.itemTop}>
          <View
            style={[
              styles.itemTopImageBox,
             {
              backgroundColor:mood ==1 ? 'rgba(255, 141, 26, 1)': mood == 2 ? 'rgba(67, 207, 124, 1)' : mood == 3 ? 'rgba(142, 142, 147, 1)' : 'rgba(199, 199, 204, 1)'
             }
            ]}
          >
            {/* <Image
              source={image}
              style={{
                width:20,
                height:20,
              }}
            /> */}
          </View>
          <View style={styles.itemTilteBox}>
            <View style={styles.itemTopLeft}>
              <Text style={styles.itemTopLeftTextOne}>
                {eventOneName} {eventTwoName} {eventThreeName} &nbsp;
              </Text>
              {/* <Text style={styles.itemTopLeftTextTwo}>{addTimeStr}</Text> */}
            </View>
            <Text style={styles.itemTopRight}>{time}h</Text>
          </View>
        </View>
        {remark ? <Text style={styles.itemDesc}>{remark}</Text> : ""}
      </View>
    </TouchableHighlight>
  );
};

const TaskItem = React.memo(
  ({
    onActive,
    onLongPress,
    onLayout,
    hasActived,
    hasOperated,
    ...task
  }: TaskItemProps) => {
    const [year, month, day] = task.date.split("-");
    const dateStr = `${month}月${day}日`;

    // console.log("render item---", task.date, task.cards.length);

    const getImageUrl = (type) => {
      let url = require("../../../../assets/images/smail.png");
      if (type == 2) {
        url = require("../../../../assets/images/cry.png");
      } else if (type == 3) {
        url = require("../../../../assets/images/normal.png");
      } else if (!type) {
        url = require("../../../../assets/images/mood_null.png");
      }
      return url;
    };
    const BlankBody = ({ date }) => {
      return (
        <Pressable
          onPress={() => onActive(date)}
          style={[
            {
              height: /*RFValue*/ 122,
              borderRadius: 16,
              justifyContent: "center",
              alignItems: "center",
              marginTop: /*RFValue*/ 5,
              backgroundColor: "rgba(247,247,247,1)",
            },
            hasActived && styles.active,
          ]}
        >
          <Text
            style={{
              fontSize: /*RFValue*/ 14,
              fontFamily: "HarmonyOS_Sans_SC_Regular",
              fontWeight: 500,
              color: "#8E8E93",
            }}
          >
            暂无事项
          </Text>
        </Pressable>
      );
    };

    return (
      <View
        onLayout={(e) =>
          onLayout({ date: task.date, height: e.nativeEvent.layout.height })
        }
      >
        <View
          style={{
            alignItems: "center",
            flexDirection: "row",
            marginTop: /*RFValue*/ 20,
          }}
        >
          <View style={{ flex: 1, flexDirection: "row" }}>
            <Text
              style={{
                color: "rgba(142, 142, 147, 1)",
                fontSize: /*RFValue*/ 14,
                fontFamily: "HarmonyOS_Sans_SC_Regular",
              }}
            >
              {dateStr} {moment(task.date).format("dddd")}
            </Text>
          </View>
          <View style={{ flex: 1, alignItems: "flex-end" }}>
            <Text style={{ fontSize: /*RFValue*/ 14 }}>
              总计 {task.totalTime}h
            </Text>
          </View>
        </View>
        {task.cards.length == 0 ? (
          <BlankBody date={task.date} />
        ) : (
          <Pressable
            onPress={() => onActive(task.date)}
            style={[
              {
                backgroundColor: "#F7F7F7",
                borderRadius: 16,
                marginTop: /*RFValue*/ 5,
                paddingVertical:5,
                overflow: "hidden",
              },
              hasActived && styles.active,
            ]}
          >
            {task.cards.map((card) => {
              const info = { date: task.date, ...card };
              // setVisible,getImageUrl,setRecord,onActive
              return (
                <RecordBody
                  hasActived={hasActived}
                  getImageUrl={getImageUrl}
                  onActive={onActive}
                  onOperte={onLongPress}
                  key={card.id}
                  card={info}
                />
              );
            })}
          </Pressable>
        )}
      </View>
    );
  },
  // (prevs, nexts) => {
  //   return (
  //     prevs.hasOperated === nexts.hasOperated &&
  //     prevs.hasActived === nexts.hasActived
  //   );
  // }
);
const styles = StyleSheet.create({
  active: {
    backgroundColor: "#E2E8F2",
  },
  itemTop: {
    width: "100%",
    flexDirection: "row",
    alignItems: "center",
  },
  itemTopImageBox: {
    width: 8,
    height: 8,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 6,
    backgroundColor: "#C7C7CC",
    marginRight: 8,
  },
  itemTopLeft: {},
  itemTilteBox: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  itemTopLeftTextOne: {
    fontSize: 14,
    fontWeight: "500",
    lineHeight: 20,
    fontFamily: "HarmonyOS Sans SC",
    color: "#1C1C1E",
  },
  itemTopLeftTextTwo: {
    fontSize: 10,
    lineHeight: 16,
    fontFamily: "HarmonyOS Sans SC",
    color: "#8E8E93",
  },
  itemTopRight: {
    fontSize: 14,
    lineHeight: 20,
    fontFamily: "HarmonyOS Sans SC",
    color: "#2C2C2E",
    fontWeight: "700",
  },
  itemDesc: {
    paddingLeft: 16,
    color: "#8E8E93",
    fontSize: 10,
    lineHeight: 16,
    fontFamily: "HarmonyOS Sans SC",
  },
});

export default TaskItem;
